import React, {Component, lazy, Suspense} from 'react';
import {Route, Switch} from 'react-router-dom';

const Product = lazy(() => import('../../pages/Product'));
const ProductCategory = lazy(() => import('../../pages/ProductCategory'));
const Order = lazy(() => import('../../pages/Order'));
const User = lazy(() => import('../../pages/User'));
const HomeMain = lazy(() => import('../Home/HomeMain'));

class HomeRouteContent extends Component {
	constructor(props) {
		super(props);
		this.state = {
			routes: [
				{
					path: '/product',
					component: Product
				},
				{
					path: '/product-category',
					component: ProductCategory
				},
				{
					path: '/order',
					component: Order
				},
				{
					path: '/user',
					component: User
				},
				{
					path: '/',
					component: HomeMain
				}
			]
		}
	}

	render() {
		return (
			<Suspense fallback={<div>loading···</div>}>
				<div className="home-route-content">
					<Switch>
						{
							this.state.routes.map((item, index) => {
								return (
									<Route key={index} path={item.path} render={item.render}
									       component={item.component}/>
								)
							})
						}
					</Switch>
				</div>
			</Suspense>
		);
	}
}

export default HomeRouteContent;